﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>numpadDecSeparator - demo</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
	<link type="text/css" rel="stylesheet" href="css/shCore.css"/>
	<link type="text/css" rel="stylesheet" href="css/shThemeDefault.css"/>
	<script type="text/javascript" src="js/shCore.js"></script>
	<script type="text/javascript" src="js/shBrushJScript.js"></script>
	<script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="../js/jquery.numpadDecSeparator.js"></script>
	<script type="text/javascript">
		$(function(){
			SyntaxHighlighter.all();
			$("#default").numpadDecSeparator();
			$("#space").numpadDecSeparator({separator: ' '});
			$("#regional").numpadDecSeparator({useRegionalSettings: true});
			$(".add").numpadDecSeparator();
			$(".unbind").numpadDecSeparator({separator: ' '});
			$("#unbindButton").click(function(){
				$(".unbind").numpadDecSeparator('unbind').val("").first().focus();
			});
		});
		function addInput(){
			$('<input type="text" id="amount3" class="add" />').appendTo('#addInput');
			$(".add").numpadDecSeparator();
		}
	</script>
</head>
<body>
<div id="header">
	<img src="../logo/logo.png"  width="50" height="50">
	<h1>numpadDecSeparator jQuery plugin - demo</h1>
</header>
<div id="main">
	<p>For each example type a decimal number while using the numpad keyboard.</p>

	<h2>Example 1: comma as numpad decimal separator</h2>
	<h3>Usage example</h3>
	<pre class="brush: js;">
	$(function(){
		$("#default").numpadDecSeparator();
	});
	...
	&lt;input type="text" id="default" /&gt;
	</pre>
	<label for="default">'150.00' will output '150,00'</label>
	<input type="text" id="default" />

	<h2>Example 2: Space as numpad decimal separator</h2>
	<h3>Usage example</h3>
	<pre class="brush: js;">
	$(function(){
		$("#space").numpadDecSeparator({separator: ' '});
	});
	...
	&lt;input type="text" id="space" /&gt;
	</pre>
	<label for="default">'150.00' will output '150 00'</label>
	<input type="text" id="space" />

	<h2>Example 3: Use regional setting of operating system as numpad decimal separator</h2>
	<h3>Usage example</h3>
	<pre class="brush: js;">
	$(function(){
		$("#regional").numpadDecSeparator({useRegionalSettings: true});
	});
	...
	&lt;input type="text" id="regional" /&gt;
	</pre>
	<p>'150.00' will output '150,00' when regional setting is dutch belgium</p>
	<p>'150.00' will output '150.00' when regional setting is english US</p>
	<p><strong>This only works in firefox and IE!</strong></p>
	<label for="regional">according to regional setting '150.00' will output '150,00' or something else according regional options of OS.</label>
	<input type="text" id="regional" />

	<h2>Example 4: Adding fields dynamically</h2>
	<p>If you use the numpadDecSeparator in a dynamic environment as an ajax environment where you add fields on the fly you can use the following example as a guide.</p>
	<h3>Usage example</h3>
	<pre class="brush: js;">
	$(function(){
		$("#default").numpadDecSeparator();
	});
	function addInput(){
		$('&lt;input type="text" id="amount3" class="add" /&gt').appendTo('#addInput');
		$(".add").numpadDecSeparator();
	}
	...
	&lt;input type="text" class="add" /&gt;
	&lt;input type="button" value="add input" onclick="addInput();" /&gt;
	</pre>
	<input type="text" class="add" />
	<input type="button" value="add input" onclick="addInput();" />
	<div id="addInput">
	</div>

	<h2>Example 5: unbind</h2>
	<h3>Usage example</h3>
	<pre class="brush: js;">
	$(function(){
		$(".unbind").numpadDecSeparator({separator: ' '});
		$("#unbindButton").click(function(){
			$(".unbind").numpadDecSeparator('unbind').val("").first().focus();
		});
	});
	...
	&lt;input type="text" class="unbind" /&gt;
	&lt;input type="button" id="unbindButton" value="unbind" /&gt;
	</pre>
	<label for="default">before unbind '150.00' will output '150 00', after unbind will output '150.00'</label>
	<input type="text" id="unbind" class="unbind" /><input type="text" class="unbind" />
	<input type="button" id="unbindButton" value="unbind" />
</div>

</body>
</html>